<template>
  <div style="background: #fff;">
      <ul class="nav">
        
        <li v-for="(item,index) in routerInfo" :key="index" :class="activeIndex===item.index?'active':'default'">
          <div @click="itemActive(item.index)">
            <span class="dot" v-if="activeIndex===item.index"></span>
            <span class="title">{{ item.title }}</span>
            <span class="delete">
              <a-icon
                type="close-circle"
                v-if="showDeleteState && hoverIndex ===item.index"
                style="color: #ff0000;"
                @mouseleave="hideDelete(item.index)"
                @click.stop="deleteItem(item.index)"
              />
              <a-icon type="close" class="close" @mouseover="showDelete(item.index)" v-if="!(hoverIndex ===item.index)" />
            </span>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>

import { i18nRender } from '@/locales'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import store from '../../../src/store'

export default {
  name: 'HistoryNav',
  components: {
  
  },
  
  props: {
    
  },

  data () {
    return {
      activeIndex: -1,
      showDeleteState: false,
      hoverIndex: -1,
      routerInfo:[
        {
          title: '首页信息',
          index: 0,
        },
        {
          title: '学校信息',
          index: 1,
        },
        {
          title: '操场信息',
          index: 2,
        },
        {
          title: '跑道信息',
          index: 3,
        },
        {
          title: '沙坑信息',
          index: 4,
        },
        {
          title: '看台信息',
          index: 5,
        },
        {
          title: '柳树信息',
          index: 6,
        },
        {
          title: '足球场信息',
          index: 7,
        },
        {
          title: '围栏信息',
          index: 8,
        }
      ]
    }
  },

  created(){
  
  },

  mounted(){

  },

  methods: {
    
    // 点击选中
    itemActive(index){
      this.activeIndex = index;
      console.log("---itemActive---", index);
    },

    // 光标浮动到删除图标之上,显示删除-红
    showDelete(index){
      this.showDeleteState = true
      this.hoverIndex= index
      console.log("----this.hoverIndex---", index);
    },

    // 光标离开删除图标，不显示删除-红
    hideDelete(index){
      this.hoverIndex = -1
    },

    // 删除历史
    deleteItem(index){
      console.log("---deleteItem---", index);
      console.log("删除路由记录-index-", this.$router);
      this.$router.go(-1)
    }



  }
}
</script>

<style lang="less" scoped>
  .nav{
    list-style: none;
    overflow: hidden;
    height: 32px;
  }
  .nav li{
    float: left;
    border: 1px solid #ccc;
    margin-left: 10px;
    padding: 2px 10px;
    height: 28px;
    border-radius: 3px;
    margin-top: 4px;
    font-size: 13px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .nav .active {
    background: #0badf9;
    color: #fff;
    border-color: #0badf9;
  }
  .nav li .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: #fff;
    color: #fff;
    margin-right: 5px;
  }
  .nav li .title{
    margin-right: 10px;
  }
  .nav li .close{
    font-size: 10px;
  }
  .nav li .delete{
    display: inline-block; 
    width: 18px;
  }
</style>
